import React, { Component } from 'react'
import { Link } from 'react-router-dom'
import { 
  Row,
  Col,
  Table,
  Button
} from 'antd'
import api from '../api'
import '../css/home.less'
const columns = [
  {
    title: '编号',
    dataIndex: 'id',
    key: 'id',
  },
  {
    title: '商品',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '缩略图',
    dataIndex: 'cover_url',
    key: 'cover_url',
  },
  {
    title: '商品分类',
    dataIndex: 'class_name',
    key: 'class_name',
  },
  {
    title: '数量',
    dataIndex: 'inventory',
    key: 'inventory',
  },
  {
    title: '规格',
    dataIndex: 'sku',
    key: 'sku',
    render: (sku = []) => {
      return sku.join('-')
    }
  },
  {
    title: '所需积分',
    dataIndex: 'point',
    key: 'point',
  },
  {
    title: '所需金额',
    dataIndex: 'price',
    key: 'price',
  },
  {
    title: '运费',
    dataIndex: 'freight_fee',
    key: 'freight_fee',
  },
  {
    title: '操作',
    key: 'action',
    render: (record) => (
        <Button>
          <Link to={{
            path: `/commodity/specification/${record.id}`,
            query: { comkey: 'pricesetting'}
          }}>处理</Link>
        </Button>
    ),
  }
]

class index extends Component {
  constructor(props) {
    super(props)
    this.state = {
      goods: {
        filter: {
          limit: 15,
          page: 1,
          inventory_warn: 1
        },
        goods: [],
        goods_count: 0
      },
      // loggedUser: {},
      totalAll: {}, // 全部订单金额统计总数
      totalToday: {}, // 今日订单金额统计总数
      unfilled: {}
    }
  }
  //组件初始化时只调用，以后组件更新不调用，整个生命周期只调用一次，此时可以修改state。
  componentWillMount() {
    // let loggedUser = localStorage.getItem('LOGGED_USER')
    // if (loggedUser) {
    //   this.setState({loggedUser: JSON.parse(loggedUser)})
    // }else{
    //   this.props.history.push('/logo')
    // }
    this.getAllStatics()
    this.getTodayStatics()
    this.undeliveredOrder()
    this.fetchgoods(1)
  }
  // 组件渲染之后调用，只调用一次。
  // componentDidMount() {}
  // 更新--组件接受新的props时调用(组件初始化时不调用)
  // componentWillReceiveProps(nextProps){}
  // 组件接受新的state或者props时调用，
  //我们可以设置在此对比前后两个props和state是否相同，如果相同则返回false阻止更新，因为相同的属性状态一定会生成相同的dom树，
  // 这样就不需要创造新的dom树和旧的dom树进行diff算法对比，节省大量性能，尤其是在dom结构复杂的时候
  // shouldComponentUpdate(nextProps, nextState){}
  //组件初始化时不调用，只有在组件将要更新时才调用
  // componentWillUpdata(nextProps, nextState){}
  // 组件初始化时不调用，组件更新完成后调用，此时可以获取dom节点。
  // componentDidUpdate(){}
  // 组件将要卸载时调用，一些事件监听和定时器需要在此时清除。
  // componentWillUnmount (){}
  // 全部订单金额统计总数
  getAllStatics = () => {
    api.home_getStatics().then(({ data }) => {
      if (data.status === 'success') {
        this.setState({ totalAll: data.data.total })
      }
    })
  }
  // 今天订单金额统计总数
  getTodayStatics = () => {
    api.home_getStatics({ today: 1 }).then(({ data }) => {
      if (data.status === 'success') {
        this.setState({ totalToday: data.data.total })
      }
    })
  }
  // 未发货订单
  undeliveredOrder = () => {
    api.home_getorderslist().then(({ data }) => {
      if (data.status === 'success') {
        let priceSum = 0
        let pointSum = 0
        data.data.orders.forEach((item, index) => {
          pointSum += Number(item.point)
          if (item.payType === 'POINTCASH') {
            let price = Number(item.price).toFixed(2)
            let freightfee = Number(item.freight_fee).toFixed(2)
            price = Number(price)
            freightfee = Number(freightfee)
            priceSum += (price + freightfee)
          }
        })
        this.setState({ unfilled: 
          {
            orders_count: data.data.orders.length,
            price_sum: priceSum.toFixed(2),
            point_sum: pointSum
          }
        })
      }
    })
  }
  // 库存预警
  fetchgoods = (_page) => {
    const goods =  this.state.goods
    goods.filter.page = _page
    api.home_getGoods({
      limit: 15,
      page: Number(_page),
      inventory_warn: 1
    }).then(({ data }) => {
      if (data.status === 'success') {
        const goods =  this.state.goods
        goods.goods = data.data.goods.map((item, index) => {
          return {
            ...item,
            key: `${index}`
          }
        })
        goods.goods_count = Number(data.data.goods_count)
        this.setState({ goods: goods })
      }
    })
  }
  render() {
    const { history} = this.props
    const {goods,totalToday, totalAll, unfilled} = this.state
    return (
      <div>
        <Row gutter={20} style={{background: '#fff'}}>
          <Col className="card">
            <div className="box-card">
              <div className="card-summary">
                <div className="card-summary-item">
                  <h2>积分兑换订单总数</h2>
                  <div className="info">{totalAll.point_order_count}笔</div>
                </div>
                <div className="card-summary-item">
                  <h2>积分换购订单总数</h2>
                  <div className="info">{totalAll.pointcash_order_count || 0} 笔</div>
                </div>
                <div className="card-summary-item">
                  <h2>销售总金额</h2>
                  <div className="info">{totalAll.price_sum || 0} 元</div>
                </div>
                <div className="card-summary-item">
                  <h2>核销总积分</h2>
                  <div className="info">{totalAll.point_sum || 0} 积分</div>
                </div>
              </div>
            </div>
          </Col>
        </Row>
        <Row gutter={20} >
          <Col className="card" span={12} style={{paddingLeft: 0}}>
            <dl className="carddl">
              <dt className="clearfix">
                <span>未发货订单</span>
                <span className="btn" onClick={() => {history.push('/orde')}}>前往处理</span>
              </dt>
              <dd className="carddl-summary">
                <div className="carddl-summary-item">
                  <div className="carddl-summary-title">
                    <span className="card_circle_7">
                      <i></i>
                    </span>订单数
                  </div>
                  <div className="carddl-summary-info">{unfilled.orders_count || 0}</div>
                </div>
                <div className="carddl-summary-item">
                  <div className="carddl-summary-title">
                    <span className="card_circle_8">
                      <i></i>
                    </span>合计金额
                  </div>
                  <div className="carddl-summary-info">{unfilled.price_sum || 0}</div>
                </div>
                <div className="carddl-summary-item">
                  <div className="carddl-summary-title">
                    <span className="card_circle_9">
                      <i></i>
                    </span>合计积分
                  </div>
                  <div className="carddl-summary-info">{unfilled.point_sum || 0}</div>
                </div>
              </dd>
            </dl>
          </Col>
          <Col className="card" span={12} style={{paddingRight: 0}}>
            <dl className="carddl">
              <dt className="clearfix"><span>今日销售情况</span></dt>
              <dd className="carddl-summary">
                <div className="carddl-summary-item">
                  <div className="carddl-summary-title">
                    <span className="card_circle_4">
                      <i></i>
                    </span>销售金额
                  </div>
                  <div className="carddl-summary-info">￥{totalToday.price_sum || 0}</div>
                </div>
                <div className="carddl-summary-item">
                  <div className="carddl-summary-title">
                    <span className="card_circle_5">
                      <i></i>
                    </span>核销积分
                  </div>
                  <div className="carddl-summary-info">{totalToday.point_sum || 0}积分</div>
                </div>
                <div className="carddl-summary-item">
                  <div className="carddl-summary-title">
                    <span className="card_circle_6">
                      <i></i>
                    </span>订单总数
                  </div>
                  <div className="carddl-summary-info">{totalToday.point_order_count || 0}笔</div>
                </div>
              </dd>
            </dl>
          </Col>
        </Row>
        <Row className="card" gutter={20} style={{backgroundColor: '#fff',paddingTop: 0}}>
          <div className="clearfix">库存预警</div>
          <Table
            dataSource={goods.goods}
            columns={columns}
            size="small"
            bordered
            pagination={{
              defaultCurrent: 1,
              total: goods.goods_count,
              defaultPageSize: goods.filter.limit
            }}
          />
        </Row>
      </div>
    )
  }
}
export default index